<template>
    <a-row class="info">
        <!-- 简介 -->
        <div class="card">
            <a-card hoverable>
                <img
                    slot="cover"
                    alt="example"
                    src="../../assets/img/timg.jpg"
                />
                <a-card-meta
                    style="text-align: lefts; font-size: 22px"
                    title="我们的征途是星辰大海"
                    description="Our journey is a sea of stars."
                >
                </a-card-meta>
            </a-card>
        </div>
        <!-- 搜索 -->
        <div class="card">
            <a-card title="站内搜" hoverable :bordered="false">
                <a-input-search
                    placeholder="请输入查询关键字，多个关键字使用空格隔开"
                    enter-button="Search"
                    size="small"
                    @search="onSearch"
                />
            </a-card>
        </div>
        <!-- 公告 -->
        <div class="card">
            <a-card title="网站公告" hoverable :bordered="false">
                <p v-for="notice in notices" :key="notice.id">
                    {{ notice.noticeTitle }}
                </p>
                <p v-if="notices==null || notices.length==0">暂无公告</p>
            </a-card>
        </div>
        <!-- 标签云 -->
        <div class="card">
            <a-card title="标签集" hoverable :bordered="false">
                <div id="tags">
                    <router-link
                        :to="tag.tagUrl"
                        v-for="tag in tags"
                        :key="tag.id"
                    >
                        <a-tag :color="tag.tagColor" hover="pointer">
                            {{ tag.tagName }}
                        </a-tag>
                    </router-link>
                </div>
            </a-card>
        </div>
        <!-- 日历 -->
        <div class="card">
            <a-card title="日历" hoverable :bordered="false">
                <a-calendar :fullscreen="false" />
            </a-card>
        </div>
    </a-row>
</template>

<script>
export default {
    data() {
        return {
            /* 标签云 */
            tags: [],
            /* 公告 */
            notices: [],
        };
    },
    mounted() {
        this.getAllTags();
        this.getAllNotice();
    },
    methods: {
        /* 搜索功能 */
        onSearch(value) {
            this.$router.push({path: "/search",query: {value: value}});
        },
        /* 获取所有标签 */
        getAllTags() {
            this.$api.tag.getAll().then((res) => {
                if (res.code == 200) {
                    this.tags = res.data.tags;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        /* 获取所有公告 */
        getAllNotice() {
            this.$api.notice.getAll().then((res) => {
                if (res.code == 200) {
                    this.notices = res.data.notices;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.info {
    width: 80%;
    height: auto;
    margin-top: 20px;
    .card {
        margin-bottom: 20px;
        div {
            background: rgba(255, 255, 255, 0.85);
            div {
                background: rgba(255, 255, 255, 0);
            }
        }
        a-card {
            width: 100%;
            overflow: hidden;
        }
        #tags {
            span {
                font-size: 16px;
                margin: 5px;
            }
        }
    }
}
</style>